<template>
	<div class="newt-wrap">
		<div class="base-info">基本信息</div>
		<div class="base-info-list">
			<div class="base-info-item">
				<div class="task-left item-right">任务名称:</div>
				<input type="text"  v-model="taskDetail.name">
				<p class="base-info-state-task">说明：请填写任务名称，例如"便携补水仪"</p>
			</div>
			<div class="base-info-item">
				<div class="task-left item-right">推广日期:</div>
				<div class="time-box">
					<div class="time-select">
						<el-date-picker
							v-model="taskDetail.startTime"
							:picker-options="startTimeLimit"
							class="time-style"
							type="date"
							size="small"
							clear-icon=true
							value-format="yyyy-MM-dd"
							placeholder="开始日期"
						>
						</el-date-picker>
					</div>
					<p class="time-center">至</p>
					<div class="time-select">
						<el-date-picker
							v-model="taskDetail.endTime"
							:picker-options="endTimeLimit"
							type="date"
							class="time-style"
							size="small"
							clear-icon=true
							value-format="yyyy-MM-dd"
							placeholder="结束日期"
						>
						</el-date-picker>
					<!-- <img src="~assets/images/calendar1.png" class="calendar1">
					<img src="~assets/images/calendar2.png" class="calendar2"> -->
					</div>
				</div>
			</div>
			<div class="base-info-item-plat">
				<div class="task-left item-right">推广内容:</div>
				<textarea class="text-dec" v-model="taskDetail.content">例如：连麦直播卖货，推荐电商产品。时长10分钟。</textarea>
				<p class="base-info-state-task there">说明：请填写推广内容，以及产品简单介绍。例如"便携补水仪连麦推广10分钟。德囯品质，经久耐用。可以随身携帯，方便出门随时保持皮肤水嫩"</p>
			</div>
			<div class="base-info-item">
				<div class="task-left item-right">指定平台:</div>
				<div class="el-right-item">
					<el-select v-model="platName" @change="selPlat($event)">
						<el-option
							v-for="item in platData"
							:key="item.id"
							:label="item.name"
							:value="item"
						>
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="base-info-item">
				<div class="task-left item-right">指定主播:</div>
				<input type="text" value="李子柒" v-model="anchorName">
				<p class="base-info-state-task">说明：请填写想连麦的主播昵称</p>
			</div>
			<div class="base-info-item">
				<div class="task-left item-right">任务预算:</div>
				<input type="text" class="item-budget" value="3000元" v-model="taskDetail.budget">
				<span class="item-price">(元)</span>
				<p class="base-info-state-task task-budget"> 说明：请填写你的连麦预算，例如5000元</p>
			</div>
			<div class="base-info-send">
				<el-button 
					class="data-wrap-export" 
					type="primary"
					@click="btnExport" 
				>提交
				</el-button>           
			</div>
		</div>
	</div>
</template>
<script>
export default {
	async fetch({store}) {
		await store.commit('setMyAddFans',1)
	},
	layout: "internalouts",
	data(){
		return{
			startTimeLimit:{
				disabledDate:(time) =>{	
				  return new Date(time).getTime() < Date.now() - 1 * 24 * 60 * 60 * 1000; //只能选择大于等于当天的日期
					if(this.taskDetail.endTime){
						return time.getTime() >= new Date(this.taskDetail.endTime).getTime() //结束日期要大于开始日期
					}
				},
			},
			endTimeLimit:{
				disabledDate:(time) =>{
					if (this.taskDetail.startTime) {
						return time.getTime() <= new Date(this.taskDetail.startTime).getTime() - 1 * 24 * 60 * 60 * 1000
					}
				}
			},
			taskDetail:{
				name:'', //任务名称
				startTime:'', //开始时间
				endTime:'', //结束时间
				content:'', //详情内容
				anchorName:'', //主播昵称
				budget:'', //任务预算
				platformName:'', // 平台名称
				platformId:'', //平台ID
			},
			platData:{ //平台数据
	
			},
			platName:'', //平台名称默认的
			anchorName:this.$route.query.name
		}
	},
	watch:{
		'taskDetail.budget'(newVal){ 
			this.taskDetail.budget = newVal.replace(/\D/g, '')
		}
	},
	methods:{
		selPlat(e){ //select下拉框change事件
			this.taskDetail.platformName = e.name //赋值name给平台名称传递过去的
			this.platName = this.taskDetail.platformName //点击切换的时候赋值
			this.taskDetail.platformId = e.id //赋值nameId给平台ID传递过去的
		},
		btnExport(){
			this.getData() //调用新建任务和修改任务的接口
		},
		taskDetails(){ //连麦涨粉-任务管理-任务详情
			if(this.$route.query.id == null){ //如果id为null,我们直接终止其操作
				return;
			}
			let params ={
				id:this.$route.query.id//有id我们就传过去
			}
			this.$axios.$post('detailContactTask',params).then(res => {
				if(res.status === 200 ){
					this.taskDetail = res.obj //拿到对应的数据设置给对应的表单即可
					this.platName = res.obj.platformName //拿到对应的平台名称设置给对应的指定平台即可
				}else{
					this.$message.warning(res.msg)
				}
			})
			.catch(error => {
				this.$message.warning('请求失败')
			})
		},
		getData(){ //新建任务新增和修改的任务的接口
			if(!this.taskDetail.name || !this.taskDetail.startTime || !this.taskDetail.endTime || !this.taskDetail.content || !this.anchorName) return
			if(!this.taskDetail.budget || !this.platName || !this.taskDetail.platformId) return
			let params ={
				id:this.$route.query.id || null, //有id代表修改，没有代表新增
				anchorId:this.$route.query.anchorId ,// 获取到主播ID
				name:this.taskDetail.name, 	//传递任务名称
				startTime:this.taskDetail.startTime, //传递开始时间
				endTime:this.taskDetail.endTime, //传递结束时间
				content:this.taskDetail.content, //传递任务内容
				anchorName:this.anchorName, //传递任务主播名称`
				budget:this.taskDetail.budget, //传递任务预算
				platformName:this.platName, //传递任务平台名称
				platformId:this.taskDetail.platformId, //传递任务平台ID
			}
			this.$axios.$post('createContactTask',params).then(res => {
				if(res.status === 200 ){
					// this.$message.success(res.msg)
					this.$message({
						type:'success',
						message:res.msg,
						duration:1000,
					})
					this.$router.push({
						path:'/myAddFans/jumpdetail',
						query:{id:res.obj}, //传递ID
					}) ;
				}else{ //走500
					this.$message.warning(res.msg)
				}
			})
				.catch(error => {
					this.$message.warning('请求失败')
				})
		},
		platCate(){ //连麦涨粉-初始化(平台，类型数据)
			let params ={
			}
			this.$axios.$post('raiseFansInit',params).then(res => {
					if(res.status === 200 ){
						this.platData = res.obj.platformList //平台数据
					}else{
						this.$message.warning(res.msg)
					}
			})
				.catch(error => {
						this.$message.warning('请求失败');
						this.loading = false;    
				})
		}
	},
	created(){
	},
	mounted(){
		this.platCate(); //调用初始化平台接口，拿到对应的平台ID和平台名字;
		this.taskDetails(); //调用任务详情接口;
	}
}
</script>

<style scoped>
	.newt-wrap{
		padding:20px;
		background:#ffffff;
		font-size:14px;
		box-sizing:border-box;
	}
	.base-info{
		width:87px;
		height:18px;
		text-align:right;
		border-left:3px solid #0096e6;
		box-sizing:border-box;
		font-weight:bold;
	}
	.base-info-list{
		padding:38px 43px 14px;
	}
	.base-info-item{
		/* width:430px; */
		height:30px;
		display:flex;
		align-items:center;
		color:#666666;
		margin-top:24px;
	}
	.el-right-item .el-select{
		width:440px;
		height:30px;
	}
	.el-right-item /deep/ .el-select .el-input .el-input__icon{
		line-height:0px;
	}
	/deep/ .base-info-item .el-input__inner{
		height:30px;
		line-height:30px;
	}
	.base-info-item-plat{
		display:flex;
		color:#666666;
		margin-top:24px;
	}
	.base-info-item-plat textarea.text-dec{
		border:1px solid #e3e3e3;
		padding:8px;
		display:block;
		box-sizing:border-box;
		color:#333333;
		border-radius:4px;
	}
	.base-info-item-plat textarea.text-dec:focus{
		border:1px solid #0096e6;
	}
	.base-info-item input{
		width:440px;
		border:1px solid #e3e3e3;
		border-radius:4px;
		text-indent:12px;
		box-sizing:border-box;
	}
	.base-info-item input:focus{
    border:1px solid #0096e6;
  }
	.base-info-item  select{
		width:355px;
		border-radius:4px;
		text-indent:12px;
		height:30px;
		box-sizing:border-box;
		cursor:pointer; 
		background: url(~assets/images/sel-arrow.png) no-repeat 320px 3px;
		background-size:20px;
	}
	.plat-select{
		width:355px;
	}
	.task-left{
		width:64px;
		user-select: none;
		white-space:nowrap;
	}  
	.item-right{
		margin-right:14px;
		color:#333333;
	}
	.base-info-send{
		margin-top:78px;
	}
	.base-info-send .data-wrap-export{
		font-size: 14px;
		border-radius:15px;
		padding:8px 22px;
		box-sizing: border-box;
		outline: none;
		border: none;
		cursor: pointer;
		margin-left:78px;
	}
	.time-style{
		width:200px;
		position:relative;
	}
	.time-box{
		display:flex;
		align-items:center;
		position:relative;
	}
	.time-center{
		width:38px;
		height:30px;
		line-height: 30px;
		text-align:center;
	}
	.text-dec{
		width:440px;
		min-width:440px;
		height:183px;
	}
	.item-budget {
		width:200px !important;
	}
	.el-input--prefix .el-input__inner{
		padding-left:12px;
	}
	.calendar1{
		position: absolute;
		top: 12px;
		left: 130px;
	}
	.calendar2{
		position: absolute;
		top: 12px;
		right: 12px;
	}
	/* state begin */
	p.base-info-state-task{
		margin-left:20px;
		color:#b6b6b6;
	}
	.base-info-item-plat p.there{
		width: 361px;
		min-width:300px;
		line-height: 1.5;
		text-align:justify;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:3;
	}
	.task-budget{
		margin:0px !important;
	}
	/* state end */
	/deep/ .el-icon-date::before{
			content:''
	}
	.item-price{
		margin:0 20px 0 5px;
		color:#b6b6b6;
	}
</style>
